<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="./statis/css/me.css">
</head>

<body>
  <!-- 导航 -->
  <nav class="ui inverted attached segment m-padded-tb-mini">
    <div class="ui container">
      <div class="ui stackable inverted secondary menu ">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class="m-item item m-moible-hide"><i class="home icon"></i>首页</a>
        <a href="#" class="m-item item m-moible-hide"><i class="idea icon"></i>分类</a>
        <a href="#" class="m-item item m-moible-hide"><i class="tags icon"></i>标签</a>
        <a href="#" class="m-item item m-moible-hide"><i class="clone icon"></i>归档</a>
        <a href="#" class="m-item item m-moible-hide"><i class="info icon"></i>关于我</a>
        <div class="item right m-item m-mobile-hide">
          <div class="ui icon inverted transparent input">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>

    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>

  </nav>

  <div class="m-padded-tb-large">
    <div class="ui container">
      <div class="ui top attached segment">
        <div class="ui horizontal link list">
          <div class="item">
            <img src="https://unsplash.it/100/100?image=1005" class="ui avatar image" alt="">
            <div class="content"><a href="#" class="header">李仁密</a></div>
          </div>
          <div class="item">
            <i class="calendar icon"></i> 2017-10-01
          </div>
          <div class="item">
            <i class="eye icon"></i> 123
          </div>
        </div>
      </div>

      <div class="ui attached segment"><img src="https://unsplash.it/800/450?image=1005" alt=""
          class="ui rounded fluid image"></div>

      <div class="ui attached segment">
        <div class="ui right aligned basic segment">
          <div class="ui orange label">原创</div>
        </div>

        <h2 class="ui center aligned header">一只特立独行的猪</h2>

        <div id="content">
          <h3>1</h3>
          <p>
            插队的时候，我喂过猪、也放过牛。假如没有人来管，这两种动物也完全知道该怎样生活。它们会自由自在地闲逛，饥则食渴则饮，春天来临时还要谈谈爱情；这样一来，它们的生活层次很低，完全乏善可陈。人来了以后，给它们的生活做出了安排：每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言，这种生活主题是很悲惨的：前者的主题是干活，后者的主题是长肉。我不认为这有什么可抱怨的，因为我当时的生活也不见得丰富了多少，除了八个样板戏，也没有什么消遣。有极少数的猪和牛，它们的生活另有安排。以猪为例，种猪和母猪除了吃，还有别的事可干。就我所见，它们对这些安排也不大喜欢。种猪的任务是交配，换言之，我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪（肉猪是阉过的）才有的正人君子架势，死活不肯跳到母猪背上去。母猪的任务是生崽儿，但有些母猪却要把猪崽儿吃掉。总的来说，人的安排使猪痛苦不堪。但它们还是接受了：猪总是猪啊。
          </p>

          <h3>2</h3>
          <p>
            对生活做种种设置是人特有的品性。不光是设置动物，也设置自己。我们知道，在古希腊有个斯巴达，那里的生活被设置得了无生趣，其目的就是要使男人成为亡命战士，使女人成为生育机器，前者像些斗鸡，后者像些母猪。这两类动物是很特别的，但我以为，它们肯定不喜欢自己的生活。但不喜欢又能怎么样？人也好，动物也罢，都很难改变自己的命运。
          </p>

          <h3>3</h3>
          <p>
            以下谈到的一只猪有些与众不同。我喂猪时，它已经有四五岁了，从名分上说，它是肉猪，但长得又黑又瘦，两眼炯炯有光。这家伙像山羊一样敏捷，一米高的猪栏一跳就过；它还能跳上猪圈的房顶，这一点又像是猫——所以它总是到处游逛，根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待，它也是我的宠儿——因为它只对知青好，容许他们走到三米之内，要是别的人，它早就跑了。它是公的，原本该劁掉。不过你去试试看，哪怕你把劁猪刀藏在身后，它也能嗅出来，朝你瞪大眼睛，噢噢地吼起来。我总是用细米糠熬的粥喂它，等它吃够了以后，才把糠兑到野草里喂别的猪。其他猪看了嫉妒，一起嚷起来。这时候整个猪场一片鬼哭狼嚎，但我和它都不在乎。吃饱了以后，它就跳上房顶去晒太阳，或者模仿各种声音。它会学汽车响、拖拉机响，学得都很像；有时整天不见踪影，我估计它到附近的村寨里找母猪去了。我们这里也有母猪，都关在圈里，被过度的生育搞得走了形，又脏又臭，它对它们不感兴趣；村寨里的母猪好看一些。它有很多精彩的事迹，但我喂猪的时间短，知道得有限，索性就不写了。总而言之，所有喂过猪的知青都喜欢它，喜欢它特立独行的派头儿，还说它活得潇洒。但老乡们就不这么浪漫，他们说，这猪不正经。领导则痛恨它，这一点以后还要谈到。我对它则不止是喜欢——我尊敬它，常常不顾自己虚长十几岁这一现实，把它叫做“猪兄”。如前所述，这位猪兄会模仿各种声音。我想它也学过人说话，但没有学会——假如学会了，我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。
          </p>
        </div>

        <div class="m-margin-top-large">
          <div class="ui basic teal left pointing label">方法论</div>
        </div>

        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange basic circular button">赞赏</button>
        </div>
        <div class="ui payQ flowing popup transition hidden">
          <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit;">
              <div class="image">
                <img src="./statis/img/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 200px;">
                <div>支付宝</div>
              </div>
              <div class="image">
                <img src="./statis/img/wechat.jpg" alt="" class="ui rounded bordered image" style="width: 200px;">
                <div>微信</div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="ui attached message positive">
        <div class="ui middle aligned grid">
          <div class="eleven wide column">
            <ul class="list">
              <li>作者:魏聪(联系作者)</li>
              <li>发布时间:2021.4.22</li>
              <li>版权声明:hhhh</li>
              <li>公共号转载：222</li>
            </ul>
          </div>
          <div class="five wide column">
            <img src="./statis/img/wechat.jpg" alt="" class="ui right floated rounded bordered image"
              style="width: 110px;">
          </div>
        </div>
      </div>

      <div class="ui bottom attached segment">
        <div class="ui teal segment">哈哈哈,我抄不到源码</div>
        <div class="ui form">
          <div class="field">
            <textarea name="content" id="" placeholder="请输入留言"></textarea>
          </div>

          <div class="fields">
            <div class="field">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="nickname" placeholder="姓名">
              </div>
            </div>

            <div class="field">
              <div class="ui left icon input">
                <i class="mail icon"></i>
                <input type="text" name="nickname" placeholder="邮箱">
              </div>
            </div>

            <div class="field">
              <button class="ui teal button"><i class="edit icon"></i>发布</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided grid">
        <div class="three  wide column">
          <div class="ui inverted link list">
            <div class="item"><img style="width: 100px;" src="./statis/img/wechat.jpg" class="ui rounded image"
                alt="" /></div>
          </div>

        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">用户故事 (User Story)</a>
            <a href="#" class="item">用户故事 (User Story)</a>
            <a href="#" class="item">用户故事 (User Story)</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">用户故事 (User Story)</a>
            <a href="#" class="item">用户故事 (User Story)</a>
            <a href="#" class="item">用户故事 (User Story)</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
          <p class="m-opacity-mini">这是我的个人博客，今天在跟着做的时候，实在受不了网页响应的速度了。于是搜解决办法：
            1.第一次找到一个国内免费cdn：https://www.bootcdn.cn/，虽然加速了，但没解决问题本质</p>
        </div>
      </div>

      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-opacity-mini"> Copyright @ 2016-2017</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <script>
    $('.menu.toggle').click(() => {
      $('.m-item').toggleClass('m-moible-hide');
    })

    $('#payButton').popup({
      popup: $('.payQ.popup'),
      on: 'click',
      position: 'bottom center'
    })
  </script>
</body>

</html>